<section data-ng-controller="CreateChartItemsController">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <i class="fa fa-spinner fa-spin"></i> your account is creating...
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
            <h1>Add chart items -- {{itemCounter}}</h1>
            <to-add-chart-item></to-add-chart-item>
            <!-- form -->
            <div class="alert alert-danger" data-ng-show="itemCounter == 0 && isAttempted">
                <span>You should add chart items</span>
            </div>
            <!-- list of item -->
            <div data-ng-repeat="item in items">
                <!-- text item -->
                <div class="bs-callout bs-callout-success" ng-if="!item.saved">
                    <form name="itemForm" novalidate="" mi-submit="addItem($index)">
                        <div class="form-group" ng-class="{'has-error':(itemForm.title | shouldDisplayError:itemForm)}">
                            <label>Title</label>
                            <input type="text" class="form-control" name="title"
                                   placeholder="title" required="" data-ng-model="item.title" />
                        </div>
                        <div class="form-group" ng-class="{'has-error':(itemForm.paragraph | shouldDisplayError:itemForm)}">
                            <label>Paragraph</label>
                            <textarea type="text" class="form-control" name="paragraph"
                                      placeholder="paragraph" required="" data-ng-model="item.paragraph"/>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save"></i>
                        </button>
                    </form>
                </div>
                <div class="bs-callout bs-callout-success" ng-if="item.saved">
                    <h4>title: {{item.title}}</h4>
                    <h4>paragraph: {{item.paragraph}}</h4>
                </div>
            </div>

            <hr/>
            <button class="btn btn-primary">
                <i class="fa fa-save"></i> Save</button>
        </div>
    </div>
</section>
